<template>
	<view class="banner">
		<!-- 		<uni-swiper-dot class="uni-swiper-dot-box" :info="props.sliders" :current="current" mode="round"
			:dots-styles="dotsStyles" field="content"> -->
		<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
			<swiper-item v-for="(item, index) in sliders" :key="index">
				<view class="swiper-item">
					<image :src="item.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- </uni-swiper-dot> -->
	</view>

</template>

<script setup>
import {
	ref
} from 'vue'
const props = defineProps({
	sliders: {
		type: [Object, Array],
		default: () => {
			return []
		}
	}
})


const dotsStyles = {
	backgroundColor: 'rgba(83, 200, 249,0.3)',
	border: '1rpx rgba(83, 200, 249,0.3) solid',
	color: '#fff',

	selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
	selectedBorder: '1rpx rgba(83, 200, 249,0.9) solid'
}
const current = ref(0)
const swiperDotIndex = ref(0)
const mode = 'round'

const change = (e) => {
	current.value = e.detail.current
}
</script>

<style lang="scss" scoped>
.banner {
	position: relative;
	width: 710rpx;
	height: 225rpx;
	margin: 20rpx auto;
}

.swiper-box {
	width: 710rpx;
	height: 225rpx;
}

.swiper-item {
	width: 710rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	align-items: center;
	border-radius: 10rpx;
	height: 225rpx;

	image {
		display: block;
		width: 710rpx;
		height: 225rpx;
	}
}
</style>